<template>
	<div ref="chartThree" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
	name: 'chartThree',
	props: {
		appStartStats: {
			type: Object,
		},
	},
	watch: {
		appStartStats: {
			handler(newVal, oldVal) {
				this.updateChart();
			},
			deep: true, // 开启深度监听
		},
	},
	created() {},
	mounted() {
		this.initChart();
	},
	data() {
		return {};
	},
	methods: {
		initChart() {
			let newFontSize = (window.innerWidth * 0.04) / 6;
			let fontColor = '#5072a4';
			this.chartDom = this.$refs.chartThree;
			this.myChart = this.$echarts.init(this.chartDom);
			this.dateList = [];
			this.avgVisitsPerUdId = []; //平均次数
			this.maxVisitsSingleUdId = []; //最大次数
			for (let item of this.appStartStats) {
				this.dateList.push(item.statDate);
				this.avgVisitsPerUdId.push(item.avgVisitsPerUdId);
				this.maxVisitsSingleUdId.push(item.maxVisitsSingleUdId);
			}
			this.option = {
				textStyle: {
					fontSize: newFontSize, // 全局字体大小调整
				},
				// backgroundColor: '#11183c',
				grid: {
					left: '5%',
					right: '5%',
					top: '28%',
					bottom: '5%',
					containLabel: true,
				},
				tooltip: {
					trigger: 'axis',
					border: 'none',
					extraCssText: 'background: linear-gradient(to right, #286CE9, #01D1FF);',
					textStyle: {
						color: '#FFF',
						fontSize: newFontSize, // 全局字体大小调整
					},
					formatter: function (params) {
						let DIV = '';
						for (let item of params) {
						DIV =
							`<div> ${item.seriesName}时长 : ${item.value}分钟</div>` + `<div> ${item.seriesName}时长 : ${item.value}分钟</div>`;
						}
						return DIV;
					},
					axisPointer: {
						type: 'line',
						label: {
							show: true,
							backgroundColor: '#7B7DDC',
							// color: '#fff',
						},
					},
				},
				legend: {
					show: true,
					top: '5.5%',
					right: '2%',
					orient: 'vertucal',
					icon: 'stack',
					itemGap: 10,
					itemWidth: newFontSize,
					itemHeight: newFontSize * 0.2,
					textStyle: {
						color: 'inherit',
					},
					data: ['最大', '平均'],
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						boundaryGap: true,
						axisLabel: {
							color: fontColor,
							fontSize: newFontSize,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#5072a4',
							},
						},
						axisTick: {
							lineStyle: {
								color: '#6EA8C2', // 红色刻度线
								width: 2,
								// 刻度线宽度为2px
							},
							alignWithLabel: true,
							show: true,
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384',
							},
						},
						data: this.dateList,
						// data: [5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7],
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '',
						show: true,
						axisLabel: {
							formatter: '{value}',
							fontSize: newFontSize,
							color: '#5072a4',
						},
						axisLine: {
							lineStyle: {
								color: '#5072a4',
							},
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#11366e',
							},
						},
					},
				],
				series: [
					{
						name: '最大',
						type: 'line',
						stack: '最大',
						symbol: 'circle',
						symbolSize: newFontSize * 0.5,
						itemStyle: {
							normal: {
								color: '#307dfe',
								lineStyle: {
									color: '#307dfe',
									width: 1,
								},
								areaStyle: {
									//color: '#94C9EC'
									color: new this.$echarts.graphic.LinearGradient(2, 0, 0, 1, [
										{
											offset: 1,
											color: 'rgba(7,44,90,0)',
										},
										{
											offset: 0,
											color: 'rgba(0,212,199,0.9)',
										},
									]),
								},
							},
						},
						data: this.maxVisitsSingleUdId,
						// data: [12, 23, 35, 100, 45, 892, 688],
					},
					{
						name: '平均',
						type: 'line',
						stack: '平均',
						symbol: 'circle',
						symbolSize: newFontSize * 0.5,
						itemStyle: {
							normal: {
								color: '#05cbf1',
								lineStyle: {
									color: '#05cbf1',
									width: 1,
								},
								areaStyle: {
									//color: '#94C9EC'
									color: new this.$echarts.graphic.LinearGradient(2, 0, 0, 1, [
										{
											offset: 1,
											color: 'rgba(7,44,90,0)',
										},
										{
											offset: 0,
											color: 'rgba(114,144,89,1)',
										},
									]),
								},
							},
						},
						data: this.avgVisitsPerUdId,
						// data: [124, 243, 355, 640, 454, 182, 988],
					},
				],
			};
			this.myChart.setOption(this.option);
			this.$nextTick(() => {
				this.resize(this.myChart, this.option);
			});
		},
		resize(myChart) {
			window.addEventListener('resize', () => {
				let FontSize = (window.innerWidth * 0.04) / 6;
				let newOption = {
					textStyle: {
						fontSize: FontSize, // 应用新的字体大小
					},
					tooltip: {
						textStyle: {
							fontSize: FontSize,
						},
					},
					legend: {
						itemWidth: FontSize,
						itemHeight: FontSize * 0.2,
					},
					xAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					yAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					series: [
						{
							symbolSize: FontSize * 0.48,
						},
						{
							symbolSize: FontSize * 0.48,
						},
					],
				};
				this.option = { ...this.option, ...newOption };
				myChart.setOption(this.option);
				myChart.resize();
			});
		},
		updateChart() {
			this.avgVisitsPerUdId = []; //平均次数
			this.maxVisitsSingleUdId = []; //最大次数
			for (let item of this.appStartStats) {
				this.avgVisitsPerUdId.push(item.avgVisitsPerUdId);
				this.maxVisitsSingleUdId.push(item.maxVisitsSingleUdId);
			}
			this.option.series[0].data = [...this.maxVisitsSingleUdId];
			this.option.series[1].data = [...this.avgVisitsPerUdId];
			this.myChart.setOption(this.option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
